<template>
  <div class="findbox">
    <!-- <header class="header">
      <ul>
        <li><i class="iconfont icon-fanhui" @click="backing"></i></li>
        <li>找回密码</li>
        <li></li>
      </ul>
    </header> -->
    <Header>
      忘记密码
    </Header>
    <div class="content">
      <ul>
        <li>
          <i class="iconfont icon-shouji"></i>
          <input type="text" placeholder="手机号" v-model="tel">
          <span class="tip">{{ teltip }}</span>
        </li>
        <li>
          <i class="iconfont icon-suoding"></i>
          <input type="password" placeholder="新密码（长度不小于6位）" v-model="password">
          <span class="tip">{{ passwordtip }}</span>
        </li>
        <li>
          <i class="iconfont icon-code"></i>
          <input type="password" placeholder="确认密码" v-model="repassword">
          <span class="tip">{{ repasswordtip }}</span>
        </li>
        <p>{{ tip }}</p>
        <button class="userBtn" @click="register">确认修改</button>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request'
import Header from '@/components/header.vue'
import { Toast } from 'vant'
export default {
  data () {
    return {
      tel: '',
      password: '',
      repassword: '',
      tip: ''
    }
  },
  components: {
    Header
  },
  computed: {
    teltip () {
      if (this.tel === '') {
        return ''
      } else if (this.tel.length !== 11) {
        return '手机号为11位数'
      } else if (!(/^1[34578]\d{9}$/.test(this.tel))) {
        return '手机格式不正确'
      } else {
        return ''
      }
    },
    passwordtip () {
      if (this.password === '') {
        return ''
      } else if (this.password.length < 6 || this.password.length > 18) {
        return '密码长度在6-18之间'
      } else {
        return ''
      }
    },
    repasswordtip () {
      if (this.repassword === '') {
        return ''
      } else if (this.password !== this.repassword) {
        return '两次密码不同，请重输'
      } else {
        return ''
      }
    }
  },
  methods: {
    register () {
      if (this.tel === '' || this.teltip !== '') {
        this.tip = '请输入正确格式的手机号'
        return
      }
      if (this.password === '' || this.passwordtip !== '') {
        this.tip = '请输入正确格式的密码'
        return
      }
      if (this.repassword === '' || this.repasswordtip !== '') {
        this.tip = '密码确认失败，请重新确认'
        return
      }
      this.tip = ''
      axios.post('/users/findpwd', {
        tel: this.tel,
        password: this.password
      }).then(res => {
        if (res.data.code === '10086') {
          this.tip = '该手机号未注册过用户'
        } else {
          Toast('修改密码成功')
          this.$router.push('/login')
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.findbox {
  @include rect(100%, auto);
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  // .header {
  //   @include rect(100%, 0.55rem);
  //   @include border(0 0 1px 0, solid #bfbfbf);
  //   @include background-color(#f8f8f8);
  //   @include color(#777);
  //   @include font-size(16px);
  //   line-height: 0.51rem;
  //   ul {
  //     @include flexbox();
  //     @include justify-content(space-between);
  //     li {
  //       float: left;
  //       @include rect(0.88rem, 100%);
  //       @include text-align();
  //       &:nth-child(1) {
  //         @include rect(0.5rem, 100%);
  //         @include text-align();
  //         i {
  //           @include font-size(24px);
  //         }
  //       }
  //       &:nth-child(2) {
  //         @include rect(auto, 100%);
  //         @include text-align();
  //         @include line-height(0.55rem);
  //         @include margin(0 0 0 0.4rem);
  //       }
  //     }
  //   }
  // }
  .content {
    li {
      line-height: 50px;
      border-bottom: 1px solid #efefef;
      &:nth-child(1) {
        i {
          position: absolute;
          font-size: 20px;
          color: #a1a1a1;
          left: 34px;
          top: 60px;
        }
      }
      &:nth-child(2) {
        i {
          position: absolute;
          font-size: 20px;
          color: #a1a1a1;
          left: 32px;
          top: 121px;
        }
      }
      &:nth-child(3) {
        i {
          position: absolute;
          font-size: 20px;
          color: #a1a1a1;
          left: 32px;
          top: 182px;
        }
      }
      input {
        outline: none;
        border: 0;
        display: inline-block;
        width: 56%;
        margin: 5px 2%;
        line-height: 50px;
        text-indent: 50px;
      }
      span {
        display: inline-block;
        width: 40%;
      }
      .tip {
        color: #f66;
        text-align: center;
      }
    }
    p {
      height: 30px;
      text-align: center;
      color: #f66;
    }
    .userBtn {
      line-height: 45px;
      width: 90%;
      margin: 0 5%;
      color: #fff;
      font-size: 18px;
      border: 0;
      outline: none;
      background-color: #ff3861;
      border-radius: 3px;
    }
  }
}
</style>
